<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>New Tables</title>
<!--     <link href="siteag.css" rel="stylesheet">
<link href="juc.css" rel="stylesheet"> -->

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!-- <link href="ja.css" rel="stylesheet">
    <script src="jquery.appendGrid-1.3.6.js"></script>
    <script src="jqueryvalidate.js"></script> -->
    
    
<link href="css/bootstrap.css" rel="stylesheet">

<style>
#myformC {
	width: 650px;
		
}
label.error {
	color: red;	
}
</style>

<script id="jsSource" type="text/javascript">
	var oadbC = [];
	var oaformC = [];
	var m = 1;

	function latestFormC(myformC) {
		console.log(":: latestFormC:myformC ::" + JSON.stringify(myformC));
		var localoaformC = [];
		oaformC = [];
		var x2 = myformC;
		//alert(":: x2 ::" + x2.length);

		for (i = 0, j = 1; i < x2.length; i = i + 7, j++) {
			var obj = {};
			var x3 = x2.slice(i, i + 7);
			console.log(":: x3 ::" + JSON.stringify(x3));
			obj.sid = j;
			obj.did = x3[0].name.split('_')[1];
			obj.id = x3[0].value;
			obj.contactType = x3[1].value;	
			obj.firstName = x3[2].value;
			obj.lastName = x3[3].value;
			obj.emailId = x3[4].value;
			obj.phoneNo = x3[5].value;
			obj.mobileNo = x3[6].value;
			obj.createdBy=null;
			obj.updatedBy=null;
			obj.customerid=null;
			obj.creationDate=null;
			obj.modificationDate=null;
			//obj.role = null;
			
			localoaformC.push(obj);
		}

		oaformC = localoaformC;
		console.log(":: oaformC ::" + JSON.stringify(oaformC));
		 /* $("#myBodyC").empty();
		$.each(oaformC,function(i, item) {
			var tblColumnId = "tblColumnId_"+ item.did;
			var tblColumnSN = "tblColumnSN_"+ item.did;
			var tblColumnId = "tblColumnId_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodyC").append("<tr id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		});  */
		//return oaformC;
	}

	function convertformC(myformC) {
		console.log(":: convertformC:myformC ::" + JSON.stringify(myformC));
		var localoaformC = [];
		oaformC = [];
		var x2 = myformC;
		//alert(":: x2 ::" + x2.length);

		for (i = 0; i < x2.length; i = i + 7) {
			var obj = {};
			var x3 = x2.slice(i, i + 7);
			console.log(":: x3 ::" + JSON.stringify(x3));
			//obj.sid = j;
			//obj.did = x3[0].name.split('_')[1];
			obj.id = x3[0].value;
			obj.contactType = x3[1].value;	
			obj.firstName = x3[2].value;
			obj.lastName = x3[3].value;
			obj.emailId = x3[4].value;
			obj.phoneNo = x3[5].value;
			obj.mobileNo = x3[6].value;
			obj.createdBy=null;
			obj.updatedBy=null;
			obj.customerId=null;
			obj.creationDate=null;
			obj.modificationDate=null;
					
			//obj.role = null;
			
			localoaformC.push(obj);
		}

		oaformC = localoaformC;
		console.log(":: oaformC ::" + JSON.stringify(oaformC));
		 /* $("#myBodyC").empty();
		$.each(oaformC,function(i, item) {
			var tblColumnId = "tblColumnId_"+ item.did;
			var tblColumnSN = "tblColumnSN_"+ item.did;
			var tblColumnId = "tblColumnId_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodyC").append("<tr id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		});  */
		//return oaformC;
	}
	
	function latestdbC(mydbC) {
		var localoadbC = [];
		oadbC = [];
		var x2 = mydbC;
		//alert(":: x2 ::" + x2.length);
			
			$.each(mydbC, function(i, item) {
				var obj = {};
				
				obj.sid = i+1;
				obj.did = m;
				obj.id = item.id;
				obj.contactType = item.contactType;	
				obj.firstName = item.firstName;
				obj.lastName = item.lastName;
				obj.emailId = item.emailId;
				obj.phoneNo = item.phoneNo;
				obj.mobileNo = item.mobileNo;
				obj.createdBy=null;
				obj.updatedBy=null;
				obj.customerid=null;
				obj.creationDate=null;
				obj.modificationDate=null;
				//obj.role = null;
				
				localoadbC.push(obj);
				m++;
			});

		oadbC = localoadbC;
		console.log(":: oaformC ::" + JSON.stringify(oadbC));
		
	/* 	$.each(oadbC,function(i, item) {
			var tblColumnId = "tblColumnId_"+ item.did;
			var tblColumnSN = "tblColumnSN_"+ item.did;
			var tblColumnId = "tblColumnId_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodyC").append("<tr id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		}); */
		//return oaformC;
	}
	
	function rmvRowC(j, k) {
		var match;
		console.log(":: j.id ::" + j.id + ":: k ::" + k);
		$("#" + j.id).remove();
		var xcc = j.id.split('_')[1];
		
		
		console.log(":: oaformC ::" + JSON.stringify(oaformC));
		console.log(":: xcc ::" + xcc);
		$.each(oaformC,function(i, item) {
			console.log(":: item.did ::" + item.did);
			if(item.did == xcc) match=item.sid;
		});
		console.log(":: match ::" + match);
		oaformC.splice(match, 1);
		var z = ($("#myformC").serializeArray().length) / 7;
		var usl1 = oadbC.length;
		var lchk1 = usl1 == z;
		if (lchk1)
			$("#btnRemove").prop('disabled', true);
		else
			$("#btnRemove").prop('disabled', false);

		var x2 = $("#myformC").serializeArray();
		latestFormC(x2);

		if (k != 0){
			$.get("customer/deleteContactById", {
				id : k
			}, function(data) {

			});
			
			$.get("customer/getAllContacts",function(data) {
				
				latestdbC(data);
				var d = ($("#myformC").serializeArray().length) / 7;
				l = data.length;
				var r = l == d;
				if (r)
					$("#btnRemove").prop('disabled', true);
				else
					$("#btnRemove").prop('disabled', false);

				var x2 = $("#myformC").serializeArray();
				latestFormC(x2);
			});
			
		}
	}
	
	$.validator.setDefaults({
		submitHandler : function() {

			var x2 = $("#myformC").serializeArray();
			convertformC(x2);
			console.log(":: submitHandler:oaformC ::"+JSON.stringify(oaformC));
			var cId= '${custId}';
			var oaformCn = JSON.stringify(oaformC);
			//var x = {businessNatures:oaformCn,custId:cId};
			var x = {contacts:oaformC,custId:cId};
			$.ajax({
				headers : {
					'Accept' : 'application/json',
					'Content-Type' : 'application/json; charset=utf-8'
				},
				type : "POST",
				url : "customer/saveAllContacts",
				contentType : "application/json; charset=utf-8",
				data : JSON.stringify(x),
				async : false, //Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation
				cache : false, //This will force requested pages not to be cached by the browser          
				processData : false,
				success : function(resposeJsonObject) {
					//$("#myformC").attr("action", "businessNature");
					console.log(":: resposeJsonObject ::"+JSON.stringify(resposeJsonObject));
					latestdbC(resposeJsonObject);
					$("#myBodyC").empty();
					$.each(oadbC,function(i, item) {
						var tblColumnId = "tblColumnId_"+ item.did;
						var tblColumnSN = "tblColumnSN_"+ item.did;
						var tblColumnCT = "tblColumnCT_"+ item.did;
						var tblColumnFN = "tblColumnFN_"+ item.did;
						var tblColumnLN = "tblColumnLN_"+ item.did;
						var tblColumnEI = "tblColumnEI_"+ item.did;
						var tblColumnPN = "tblColumnPN_"+ item.did;
						var tblColumnMN = "tblColumnMN_"+ item.did;
						if(item.contactType=='Documentation'){
						$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' selected>Documentation</option><option value='Legal and Compliance'>Legal and Compliance</option><option value='Back Office'>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						}
						
						if(item.contactType=='Legal and Compliance'){
							$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation'>Documentation</option><option value='Legal and Compliance' selected>Legal and Compliance</option><option value='Back Office'>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						}
						
						 if(item.contactType=='Back Office'){
							$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' selected>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						}
						
					 if(item.contactType=='Front Office'){
							$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' selected>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						}
						
						if(item.contactType=='Technical'){
							$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' >Front Office</option><option value='Technical' selected>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						}
						
						 if(item.contactType=='Reporting'){
							$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' >Front Office</option><option value='Technical' >Technical</option><option value='Reporting' selected>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						}
						
						if (item.contactType=='Other'){
							$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' >Front Office</option><option value='Technical' >Technical</option><option value='Reporting' >Reporting</option><option value='Other' selected>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						} 
						//m++;
					});
					
				}
			});
		}
	});


	$(document).ready(function() {
		                var cId= '${custId}';
						var l = 0;
						

						$("#myformC").validate();
				

						$.get("customer/getAllContacts",{id:cId},function(data) {
											
											latestdbC(data);
											
											
											$.each(oadbC,function(i, item) {
												var tblColumnId = "tblColumnId_"+ item.did;
												var tblColumnSN = "tblColumnSN_"+ item.did;
												var tblColumnCT = "tblColumnCT_"+ item.did;
												var tblColumnFN = "tblColumnFN_"+ item.did;
												var tblColumnLN = "tblColumnLN_"+ item.did;
												var tblColumnEI = "tblColumnEI_"+ item.did;
												var tblColumnPN = "tblColumnPN_"+ item.did;
												var tblColumnMN = "tblColumnMN_"+ item.did;
												if(item.contactType=='Documentation'){
													$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' selected>Documentation</option><option value='Legal and Compliance'>Legal and Compliance</option><option value='Back Office'>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													}
													
													if(item.contactType=='Legal and Compliance'){
														$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation'>Documentation</option><option value='Legal and Compliance' selected>Legal and Compliance</option><option value='Back Office'>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													}
													
													 if(item.contactType=='Back Office'){
														$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' selected>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													}
													
													 if(item.contactType=='Front Office'){
														$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' selected>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													}
													
													 if(item.contactType=='Technical'){
														$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' >Front Office</option><option value='Technical' selected>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													}
													
												 if(item.contactType=='Reporting'){
														$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' >Front Office</option><option value='Technical' >Technical</option><option value='Reporting' selected>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													}
													
													if (item.contactType=='Other'){
														$("#myBodyC").append("<tr  class='warning' id='tblColumnTR_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation' >Documentation</option><option value='Legal and Compliance' >Legal and Compliance</option><option value='Back Office' >Back Office</option><option value='Front Office' >Front Office</option><option value='Technical' >Technical</option><option value='Reporting' >Reporting</option><option value='Other' selected>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstName+"' required='' /> </td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastName+"' required='' /> </td><td><input type='text' name='"+tblColumnEI+"' value='"+item.emailId+"' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='"+item.phoneNo+"' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='"+item.mobileNo+"' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
													} 
													
											
												//m++;
											});
											
											
											
											var d = ($("#myformC").serializeArray().length) / 7;
											l = data.length;
											var r = l == d;
											if (r)
												$("#btnRemove").prop('disabled', true);
											else
												$("#btnRemove").prop('disabled', false);

											var x2 = $("#myformC").serializeArray();
											latestFormC(x2);
										});

						
						
						$("#btnSubmit").click(function() {
                                            console.log("m"+m);
											var tblColumnSN = "tblColumnSN_"+ m;
											var tblColumnId = "tblColumnId_"+ m;
											var tblColumnCT = "tblColumnCT_"+ m;
											var tblColumnFN = "tblColumnFN_"+ m;
											var tblColumnLN = "tblColumnLN_"+ m;
											var tblColumnEI = "tblColumnEI_"+ m;
											var tblColumnPN = "tblColumnPN_"+ m;
											var tblColumnMN = "tblColumnMN_"+ m;
											var d = $("#myformC").serializeArray().length;
											var d1=(d/7)+1;
											$("#myBodyC").append("<tr class='warning' id='tblColumnTR_"+m+"'><td>"+d1 + "</td><td  style='display: none'>"+ m+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='' /></td><td><select name='"+tblColumnCT+"' ><option value='Documentation'>Documentation</option><option value='Legal and Compliance'>Legal and Compliance</option><option value='Back Office'>Back Office</option><option value='Front Office'>Front Office</option><option value='Technical'>Technical</option><option value='Reporting'>Reporting</option><option value='Other'>Other</option></select></td><td><input type='text' name='"+tblColumnFN+"' value='' required=''/> </td><td><input type='text' name='"+tblColumnLN+"' value='' required=''/> </td><td><input type='text' name='"+tblColumnEI+"' value='' required='' email='true'/> </td><td><input type='text' name='"+tblColumnPN+"' value='' required='' /> </td><td><input type='text' name='"+tblColumnMN+"' value='' required='' /> </td><td><button id='btnRemoveRow' onclick='rmvRowC(tblColumnTR_"+ m+ ",0)' class='btn btn-default' title='Delete from Browser'><span class='glyphicon glyphicon-remove'></span></button></td></tr>");
											m++;

										
											l = oadbC.length;
											var r = l == d;
											if (r)
												$("#btnRemove").prop('disabled', true);
											else
												$("#btnRemove").prop('disabled', false);
											var x2 = $("#myformC").serializeArray();
											latestFormC(x2);

										});
						
						
						
						$("#btnRemove").click(function() {

							var x2 = $("#myformC").serializeArray();
							latestFormC(x2);
							
							var forml = oaformC.length;
							
							console.log(":: oaformC[forml-1].did ::"+oaformC[forml-1].did);
							console.log(":: z ::"+forml);
							

							var dbl = oadbC.length;
							
							console.log(":: dbl ::"+dbl);
							
							var lchk1 = forml == dbl;
							
							console.log(":: lchk1 ::"+lchk1);
							
							if (lchk1)
								$("#btnRemove").prop('disabled', true);
							else{
								$("#tblColumnTR_" + oaformC[forml-1].did).remove();
								$("#btnRemove").prop('disabled', false);
							}

							m--;

						});

					});
</script>
</head>
<body>
	<div align="center">

		<form id="myformC" novalidate="novalidate" action="">
			<div id="divSource">
			<br>
				<table id="myTableC" class="table table-hover">
					
						<tr>
						    <th>S. No.</th>
							<th style="display: none">U. No.</th>
							<th style="display: none">id</th>
							<th>Contact Type</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Email Id</th>
							<th>Phone No</th>
							<th>Mobile No</th>
							<th>Actions</th>
						</tr>
					
					<tbody id="myBodyC">

					</tbody>
				</table>
				<button type="button" id="btnSubmit" class='btn btn-default' title='Add new row to Browser'> <span class="glyphicon glyphicon-plus"></span> New Row</button>
			<button type="button" id="btnRemove" class='btn btn-default' title='Remove last row from Browser'> <span class="glyphicon glyphicon-remove"></span> Last Row</button>
			<button type="submit" id="btnSaveAll" class='btn btn-default' title='Save all rows to DB'> <span class="glyphicon glyphicon-floppy-disk"></span> All Rows</button>
			<!-- <input id="btnSaveAll" type="submit" value="Save All Rows"/> -->
				

			</div>
			
		</form>

	</div>

</body>
</html>